<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue之按键事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    <input type="text" @keydown.88.70="showKeyValue" placeholder="请按键">-->
    <input type="text" @keydown.delete="showKeyValue" placeholder="请按键">
</div>
<!--
        1.Vue中常用的按键别名:
            回车 ----------------------enter
            删除 ----------------------delete·(插获“删除”和“退格”键)
            退出-----------------------esc
            空格-----------------------space
            换行-----------------------tab(特殊，必须配合keydown去使用)
            上-------------------------up
            下-------------------------down
            左-------------------------left
            右-------------------------right
        2.vue未提供别名的按键，可以使用按健原始的key值去绑定，但注点要转为kebab-case(短横线命名)
        3.系统修饰健(用法特殊):ctrl、alt、shift、meta
            (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
            (2).配合keydown使用:正常触发事件。
        4.也可以使用keyCode去指定具体的按键(不推荐)
        5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
-->


</body>
<script>
    Vue.config.productionTip = false;
    // Vue.config.keyCodes = {
    //     f: 70,
    //     d:88
    // }
    new Vue({
        el: '#app',
        data: {
            name: '长沙',
        },
        methods: {
            showKeyValue(e) {
                alert(e.key + this.name);
            }
        },
    });

</script>
</html>